<template>
	<view class="avtive">
		<u-search v-model="value" @search="search" @custom="search"></u-search>
		<view class="a1">
			<view class="a2" v-for="item in list" :key="item.id" @click="todetail(item.id)">
				<text>标题：{{item.title}}</text>
				<text>承办单位：{{item.undertaker}}</text>
				<text>开始时间：{{item.startAt}}</text>
				<text>要求：{{item.requireText}}</text>
				<u-button type="error" :text="key" style="width: 80px;" @click="baoming(item.id)"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[],
				alllist:[],
				key:'报名',
				value:''
			}
		},
		onLoad() {
			this.getlist()
		},
		methods: {
			getlist(){
				this.api.get('/prod-api/api/volunteer-service/activity/list').then(res=>{
					this.list=res.data.rows
					this.alllist=res.data.rows
				})
			},
			search(){
				if(this.value===''){
					this.list=this.alllist
				}else{
					this.list=[]
					for(let i=0;i<this.alllist.length;i++){
						if(this.alllist[i].title.indexOf(this.value)>=0){
							this.list.push(this.alllist[i])
						}
					}
				}
			},
			todetail(id){
				uni.navigateTo({
					url:'/pages/serve/volunteer/volunteerDetail/volunteerDetail?id='+id
				})
			},
			baoming(id){
				if(this.key!=='报名'){
					console.log(111)
					return
				}
				const message={
					activityId:id,
					newState:true
				}
				this.api.get('/prod-api/api/volunteer-service/register','POST',message).then(res=>{
					console.log(res.data)
					if(res.data.code===200){
						setTimeout(function(){
							uni.showToast({
								title:'报名成功'
							})
						},700)
					}else{
						setTimeout(function(){
							uni.showModal({
								title:res.data.message
							})
						},700)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
.a1{
	.a2{
		margin: 20px auto;
		width: 250px;
		// height: 250px;
		font-size: 17px;
		border: 2px solid #aa55ff;
		display: flex;
		flex-direction: column;
		line-height: 30px;
	}
}
</style>
